<template>
	<div>
		<!--修改班级对话框 -->
		<el-dialog title="修改班级" v-model="dialogVisible" :close-on-click-modal="false" @close="resetForm">
			<el-form :model="form" :rules="rules" ref="modifyForm">
				<el-form-item label="所属学院" prop="college" label-width="80px">
					<el-input v-model="form.college" placeholder="请输入所属学院"></el-input>
				</el-form-item>
				<el-form-item label="班级编号" prop="classNo" label-width="80px">
					<el-input v-model="form.classNo" placeholder="请输入班级编号"></el-input>
				</el-form-item>
				<el-form-item label="班级名称" prop="className" label-width="80px">
					<el-input v-model="form.className" placeholder="请输入班级名称"></el-input>
				</el-form-item>
				<el-form-item label="班级描述" prop="classDesc" label-width="80px">
					<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="form.classDesc"
						placeholder="请输入班级描述"></el-input>
				</el-form-item>
				<el-form-item label="成立日期" prop="establishTime" label-width="80px">
					<el-date-picker type="date" placeholder="选择成立日期" size="large" value-format="YYYY-MM-DD"
						v-model="form.establishTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="状态" prop="recordStatus" label-width="60px">
					<el-radio-group v-model="form.recordStatus">
						<el-radio-button label="正常" value="1" />
						<el-radio-button label="停用" value="9" />
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span class="dialog-footer">
				<el-button @click="resetForm">重填</el-button>
				<el-button type="primary" @click="submitForm">修改</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script setup>
	import {
		ElMessage
	} from "element-plus";
	import {
		reactive,
		toRefs,
		ref,
		defineEmits
	} from "vue";
	import api from '@api/index.js';
	const emit = defineEmits(["refresh"])
	const data = reactive({
		dialogVisible: false, // 控制对话框的显示状态
		//表单字段
		form: {
			college: "",
			classNo: "",
			className: "",
			classDesc: "",
			establishTime: "",
			recordStatus: "1",
		},
		//验证规则
		rules: {
			college: [{
				required: true,
				message: "请输入学院",
				trigger: "blur",
			}, ],
			classNo: [{
				required: true,
				message: "请输入班级编号",
				trigger: "blur",
			}, ],
			className: [{
				required: true,
				message: "请输入班级名称",
				trigger: "blur",
			}, ],
			establishTime: [{
					required: true,
					message: "请选择成立日期",
					trigger: "blur",
				},
				{
					validator: (rule, value) => {
						if (value && value < new Date()) {
							return false;
						} else {
							return true;
						}
					},
					message: "成立日期不能晚于当前日期",
					trigger: "blur",
				},
			],
		},
	});
	//创建班级表单组件实例
	let modifyForm = ref(null);
	let {
		dialogVisible,
		form,
		rules
	} = toRefs(data);

	//提交form表单
	const submitForm = () => {
		modifyForm.value.validate(async (valid) => {
			if (valid) {
				let data = {
					...form.value
				}
				let responseData = await api.classInfo.modify(data);
				if (200 != responseData.code) {
					ElMessage({
						message: responseData.message,
						type: "error"
					});
					return false;
				}
				let result = responseData.data;
				if (result) {
					ElMessage({
						message: "修改成功",
						type: "success",
						duration: 2000,
						onClose: () => {
							dialogVisible.value = false; // 关闭对话框
							//刷新父模块
							emit("refresh");
						}
					});
				} else {
					ElMessage({
						message: "服务器返回未知操作状态",
						type: "warning"
					});
				}
			} else {
				ElMessage({
					message: "提交失败!",
					type: "error",
				});
				return false;
			}
		});
	};

	//重置表单
	const resetForm = () => {
		modifyForm.value.resetFields();
	};
	defineExpose({
		dialogVisible,
		form,
	});
</script>


<style scoped>
	/* 样式可以根据需要自定义 */
</style>